<template>
	<view class="container">
		<!--收货地址.开始-->
		<view class="group-box">
			<view class="address-box">
				<view class="icon iconfont icon-address"></view>
				<view class="item">
					<view class="contact">
						<text class="name">{{model.acceptName}}</text>
						<text class="tel">{{model.mobile}}</text>
					</view>
					<view class="detail">{{model.address}}</view>
				</view>
			</view>
		</view>
		<!--收货地址.结束-->
		
		<!--商品列表.开始-->
		<view class="order-item">
			<view class="head-box">
				<text class="time">{{model.merchantTitle}}</text>
			</view>
			<view class="goods-box" v-for="(item, index) in model.orderGoods" :key="index">
				<view @click.stop="linkUrl('../goods/show?id='+item.goodsId)" class="img-box">
					<image mode="widthFix" :src="$api.loadFile(item.imgUrl)"></image>
				</view>
				<view class="right">
					<text class="title">{{item.goodsTitle}}</text>
					<text class="attr">{{item.skuText}}  x {{item.quantity}}</text>
					<text class="price">{{item.realPrice}}</text>
					<view v-if="model.paymentStatus>0" class="btn-box">
						<text v-if="item.deliveryStatus===2" class="btn">已退货</text>
						<navigator v-if="item.deliveryStatus===1" :url="'../refund/add?id='+item.id" class="btn">申请售后</navigator>
					</view>
				</view>
			</view>
			<view class="foot-box" v-if="model.orderType==2">
				<view class="text">
					<text class="tip">尾款支付时段</text>
					<text>{{model.retainStartTime}} - {{model.retainEndTime}}</text>
				</view>
			</view>
		</view>
		<!--商品列表.开始-->
		
		<!--订单金额.开始-->
		<view class="group-box top-0">
			<view class="item-list">
				<view class="list-box">
					<text class="title">商品总金额</text>
					<text class="remark right">￥{{model.realAmount}} 元</text>
				</view>
				<view v-if="model.orderType===2" class="list-box">
					<text class="title">预售定金</text>
					<text class="remark right">￥{{model.frontAmount}} 元</text>
				</view>
				<view v-if="model.realFreight>0" class="list-box">
					<text class="title">实付运费</text>
					<text class="remark right">+￥{{model.realFreight}} 元</text>
				</view>
				<view v-if="model.couponAmount>0" class="list-box">
					<text class="title">优惠券抵</text>
					<text class="remark right">-￥{{model.couponAmount}} 元</text>
				</view>
				<view v-if="model.promotionAmount>0" class="list-box">
					<text class="title">促销优惠</text>
					<text class="remark right">-￥{{model.promotionAmount}} 元</text>
				</view>
				<view v-if="model.orderType===3" class="list-box">
					<text class="title">兑换积分</text>
					<text class="remark right">{{model.point}} 分</text>
				</view>
				<view class="list-box">
					<text class="title">订单总金额</text>
					<view class="remark right">
						<text class="price bold">￥{{model.orderAmount}} 元</text>
					</view>
				</view>
			</view>
		</view>
		<!--订单金额.结束-->
		
		<!--订单信息.开始-->
		<view class="group-box top-0">
			<view class="item-list">
				<view class="list-box">
					<text class="title">订单编号</text>
					<text class="remark">{{model.orderNo}}</text>
				</view>
				<view class="list-box">
					<text class="title">下单时间</text>
					<text class="remark">
						{{model.addTime}}
					</text>
				</view>
				<view v-if="model.paymentTitle" class="list-box">
					<text class="title">支付方式</text>
					<text class="remark">
						{{model.paymentTitle}}
					</text>
				</view>
				<view v-if="model.delivery" class="list-box">
					<text class="title">配送方式</text>
					<text class="remark">
						{{model.delivery.title}}
					</text>
				</view>
				<view class="list-box">
					<text class="title">订单备注</text>
					<view class="remark">{{model.postscript?model.postscript:'暂无备注'}}</view>
				</view>
			</view>
		</view>
		<!--订单信息.结束-->
		
		<view v-if="(model.status!=2||model.paymentStatus==0)&&model.status<6" class="foot-wrap">
			<view class="foot-box">
				<text v-if="model.deliveryStatus>0" @click="linkUrl('delivery?no='+model.orderNo)" class="btn">查看物流</text>
				<text v-if="model.status<3&&model.paymentStatus==0" @click="cancelOrder" class="btn">取消订单</text>
				<text v-if="model.status==1&&model.paymentStatus==0" @click="linkUrl('../payment/confirm?no='+model.tradeNo)" class="btn red">立即付款</text>
				<text v-if="model.status===1&&model.paymentStatus==1&&model.tradeStatus==0" 
					@click.stop="linkUrl('../payment/confirm?no='+model.tradeNo)" class="btn red">支付尾款</text>
				<text v-if="model.status===1&&model.paymentStatus==1&&model.tradeStatus==1" class="btn">尾款未开始</text>
				<text v-if="model.status===3||model.status==4" @click="confirmOrder" class="btn red">确认收货</text>
				<text v-if="model.status===5&&model.orderGoods.find(val=>val.evaluateStatus===0)" 
					@click="linkUrl('../evaluate/edit?id='+model.id)" class="btn red">去评价</text>
				<text v-if="model.status>2&&model.status<6" @click="linkUrl('../refund/list?no='+model.orderNo)" class="btn">售后详情</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{
					orderGoods:[],
				},
			}
		},
		methods: {
			//初始化数据
			async initData(id){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//加载订单信息
				await _this.$api.request({
					url: `/account/order/${id}`,
				}).then(res=>{
					_this.model = res.data;
					//如果未付款
					//if(_this.model.status==1){
						//判断是否预售
						if(_this.model.orderType==2){
							//检查预付款是否已付
							let collectionType=2; //默认查找尾款
							if(_this.model.paymentStatus==0){
								collectionType=1;
							}
							let modelt = _this.model.collectionRelations.find(val=>val.collection.collectionType==collectionType)
							if(modelt){
								let collection = modelt.collection;
								let tradeStatus = _this.checkDate(collection.startTime, collection.endTime);
								_this.$set(_this.model, 'tradeNo', collection.tradeNo);
								_this.$set(_this.model, 'tradeStatus', tradeStatus);
								_this.$set(_this.model, 'paymentTitle', collection.paymentTitle);
							}
						}else{
							let collection = _this.model.collectionRelations[0].collection;
							let tradeStatus = _this.checkDate(collection.startTime, collection.endTime);
							_this.$set(_this.model, 'tradeNo', collection.tradeNo);
							_this.$set(_this.model, 'tradeStatus', tradeStatus);
							_this.$set(_this.model, 'paymentTitle', collection.paymentTitle);
						}
					//}
					let stateTip = '已下单';
					if(_this.model.status===1){
						stateTip = '待付款';
						//如果是预售订单
						if(_this.model.orderType==2){
							if(_this.model.paymentStatus==1){
								stateTip = '待付尾款';
							}
							if(_this.model.paymentStatus==1&&_this.model.tradeStatus==2){
								stateTip = '活动已失效';
							}
						}
					}else if(_this.model.status===2){
						stateTip = '待发货';
					}else if(_this.model.status===3){
						stateTip = '待收货';
					}else if(_this.model.status===4){
						stateTip = '已签收';
					}else if(_this.model.status===5){
						stateTip = '交易成功';
						if(_this.model.orderGoods.find(val=>val.evaluateStatus===0)){
							stateTip = '待评价';
						}
					}else if(_this.model.status===6){
						stateTip = '交易取消';
					}else if(_this.model.status===7){
						stateTip = '交易作废';
					}
					uni.setNavigationBarTitle({
					　　title: stateTip
					});
					//console.log(_this.model);
				});
				//关闭加载
				uni.hideLoading();
			},
			//取消订单
			cancelOrder(){
				let _this = this;
				uni.showModal({
					title: '操作提示',
					content: '确认要取消该订单吗？',
					success: function (res) {
						if (res.confirm) {
							_this.$api.request({
								url: `/account/order/collection/cancel/${_this.model.tradeNo}`,
								method: "put",
								load: true
							}).then(res=>{
								_this.model.status = 6; //更改订单状态
								_this.$api.msg(`订单已取消`, 1500, false, 'success');
							});
						}
					}
				});
			},
			//确认收货
			confirmOrder(){
				let _this = this;
				uni.showModal({
					title: '操作提示',
					content: '确认已收到货了吗？',
					success: function (res) {
						if (res.confirm) {
							_this.$api.request({
								url: `/account/order/confirm/${_this.model.id}`,
								method: "put",
								load: true
							}).then(res=>{
								_this.model.status = 5; //更改订单状态
								_this.$api.msg(`交易成功`, 1500, false, 'success');
							});
						}
					}
				});
			},
			//返回时间对比状态0正常1未开始2已结束
			checkDate(beginDateStr, endDateStr) {
				var curDate = new Date(),
				beginDate = new Date(beginDateStr),
				endDate = new Date(endDateStr);
				if (curDate < beginDate) {
					return 1;
				}
				if (curDate > endDate) {
					return 2;
				}
				return 0;
			},
			//跳转链接
			linkUrl(url){
				uni.navigateTo({
					url: url
				});
			},
		},
		//页面初始化
		onLoad(options){
			let id = parseInt(options.id);
			this.initData(id);
		}
	}
</script>

<style lang="scss">
	.address-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-radius: 20rpx;
		background: #fff;
		.icon{
			display: flex;
			align-items: center;
			color: #888;
			font-size: 48rpx;
			line-height: 1;
			width: 96rpx;
		}
		.item{
			flex-grow: 1;
			position: relative;
			padding-right: 32rpx;
			line-height: 1;
			.contact{
				display: block;
				.name{
					color: #333;
					font-size: 30rpx;
				}
				.tel{
					margin-left: 10rpx;
					color: #666;
					font-size: 28rpx;
				}
			}
			.detail{
				display: block;
				padding-top: 12rpx;
				color: #999;
				font-size: 26rpx;
				line-height: 36rpx;
			}
		}
	}
	.order-item{
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		border-radius: 20rpx;
		background: #fff;
		.head-box{
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 30rpx;
			height: 80rpx;
			color: #333;
			font-size: 28rpx;
			.time{
				flex: 1;
			}
			.state{
				color: #999;
				&.red{
					color: #fa436a;
				}
			}
			.btn{
				position: relative;
				padding: 10rpx 0 10rpx 36rpx;
				font-size: 32rpx;
				color: #999;
				&:after{
					content: "";
					width: 0;
					height: 30rpx;
					border-left: 2rpx solid #DCDFE6;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		.goods-box{
			display: flex;
			padding: 20rpx 0 20rpx 30rpx;
			border-top: 2rpx solid #f5f5f5;
			.img-box{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 2rpx;
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
				background: #f5f5f5;
				image{
					border-radius: 20rpx;
					width: 100%;
				}
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;
				.title{
					font-size: 30rpx;
					color: #333;
					line-height: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.attr{
					color: #999;
					font-size: 26rpx;
					line-height: 1;
					padding: 20rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.price{
					color: #333;
					font-size:30rpx;
					line-height: 1;
					&:before{
						content: '￥';
						font-size: 24rpx;
					}
				}
				.btn-box{
					display: flex;
					justify-content: flex-end;
					padding-top: 20rpx;
					.btn{
						margin-left: 12rpx;
						padding: 10rpx 30rpx;
						color: #555;
						font-size: 26rpx;
						line-height: 1;
						border: 1px solid #eee;
						border-radius: 100rpx;
					}
				}
			}
		}
		.foot-box{
			display: flex;
			justify-content: end;
			padding: 24rpx;
			.text{
				color: #333;
				font-size: 20rpx;
				line-height: 40rpx;
				.tip{
					margin-right: 20rpx;
					color: #999;
				}
			}
		}
	}
	.foot-wrap{
		position: relative;
		height: 100rpx;
		.foot-box{
			position: fixed;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 24rpx;
			background: #fff;
			height: 100rpx;
			border-top: 1px solid rgba($color: #000, $alpha: 0.05);
			.btn{
				margin-left: 8px;
				padding: 12rpx 30rpx;
				color: #c0c0c0;
				font-size: 26rpx;
				border: 2rpx solid #C0C0C0;
				border-radius: 100rpx;
				&.red{
					background: #fe3b0f;
					color: #fff;
					border: 2rpx solid #fff;
				}
			}
		}
	}
</style>
